<template>
  <EcDialog v-model="dialogVisible" class="form-dialog" auto-height>
    <!-- 标题 -->
    <template #title>
      <div class="dialog-title">
        <span>{{ dialogTitle }}</span>
      </div>
    </template>
    <div class="sign">
<!--      <div class="sign_auth">支付签约安全认证</div>-->
      <!--        <vue-qr :text="imageUrl" :size="200"></vue-qr>-->
      <div class="sign_qr">
        <object :data="imageUrl" width="100%" height="500px">
        </object>
<!--        <iframe ref="iframe" scrolling="no" style="overflow: hidden;"  :src="imageUrl"  frameborder="0" width="80%" height="100%"></iframe>-->
      </div>
<!--      <div class="sign_desc">手机登录企业支付宝扫码，请勿使用个人支付宝扫码</div>-->
    </div>
    <!-- 底部操作区域 -->
<!--    <template #footer v-if="!(msg === 1 && activeName === 'first')">-->
<!--      <span class="dialog-footer">-->
<!--        <el-button :loading="dataLoading" @click="dialogVisible = false">取 消</el-button>-->
<!--        <el-button-->
<!--          v-if="(msg === 0 && activeName === 'first') || (msg === 1 || activeName === 'second')"-->
<!--          :loading="dataLoading"-->
<!--          type="primary"-->
<!--          @click="onSubmitForm(msg === 0 ? 1 : 2)">-->
<!--      {{ msg === 0 && activeName === 'first' ? '下一步' : '提交审核' }}-->
<!--</el-button>-->
<!--      </span>-->
<!--    </template>-->
  </EcDialog>
</template>

<script lang="ts" setup>
import {computed, nextTick, reactive, ref} from 'vue';
import { ElLoading, ElMessage, ElNotification, FormInstance, FormRules } from 'element-plus';
import {
  getMenuList,
  SysMenuData,
  sysMenuTreeList, sysRoleAdd,
  SysRoleData,
  sysRoleInfo,
  sysRoleSaveOrUpdate, sysRoleUpdate
} from '@/api/api-sys.ts';
import useDialog from '@/hooks/use-dialog.ts';
import { EcDialog } from '@/components/dialog';
import { SvgIcon } from '@/components/icon';
import {bookPost} from "@/api/api-behalf.ts";
import {UploadImage} from "@/components/upload";
// import { UploadImage } from '@/components/upload';

import VueQr from 'vue-qr/src/packages/vue-qr.vue'
defineOptions({name: 'SysRoleForm'});

const formRef = ref<FormInstance>();
const formLoading = ref(false) // 表单是否加载中
const {dialogVisible, dialogTitle, dialogMode, dialogModeMap, dialogIconMap} = useDialog(false);
const imageUrl=ref('')
// 默认表单数据
let defaultForm: SysRoleData = {
  id: 0,
  amount:'',
  head:''
};
const activeName=ref('first')
const msg=ref(0)
// 表单数据
const formData = ref({...defaultForm});

// 表单验证规则
const formRules = reactive<FormRules>({
  amount: [{required: true, message: '金额不能为空', trigger: 'blur'}],
  head: [{required: true, message: '支付凭证不能为空', trigger: 'blur'}],
});
const options=ref<array>([])
/** 判断数据是否处于加载中 */
const dataLoading = computed(() => {
  return formLoading.value || menuTreeLoading.value;
})

/** 是否只读 */
const readonly = computed(() => {
  // return dialogMode.value == 0;
});

/** 是否新增 */
const isCreate = ref();

const menuData = ref<SysMenuData[]>([]);
const menuTreeRef = ref();
const menuTreeProps = {
  label: 'title',
  children: 'child',
};
const menuTreeLoading = ref(false)
const reverseWithChild=(arr:any)=> {
  return arr.slice().reverse().map(item => {
    if (Array.isArray(item.child)) {
      item.child = reverseWithChild(item.child);
    }
    return item;
  });
}
/** 打开弹窗 */
const open = async (mode: number, row?: any) => {
  // dialogMode.value = mode;
  dialogTitle.value = '代付签约';
  dialogVisible.value = true;
  // 重置表单
  resetForm();
  // imageUrl.value="https://openapi.alipay.com/gateway.do?alipay_root_cert_sn=687b59193f3f462dd5336e5abf83c5d8_02941eef3187dddf3d3b83462e1dfcf6&alipay_sdk=alipay-sdk-java-4.39.68.ALL&app_cert_sn=8303b244d04fdb7f1e02518c4a0c73bd&app_id=2021005157692109&biz_content=%7B%22access_params%22%3A%7B%22channel%22%3A%22QRCODE%22%7D%2C%22personal_product_code%22%3A%22FUND_SAFT_SIGN_WITHHOLDING_P%22%2C%22product_code%22%3A%22FUND_SAFT_SIGN_WITHHOLDING%22%2C%22sign_scene%22%3A%22INDUSTRY%7CSATF_ACC%22%7D&charset=UTF-8&format=json&method=alipay.user.agreement.page.sign&sign=CwhO64nSUMxkgMR2nn4BmaH7Jb3V8yRGVpehGYWURTGn5b3Vg9lu%2BTVjQPM54DX1u%2F%2BgzylHIvSUo437P0RNKyk9msNNywZWC%2F4tZ7EZfsxenJ4LsVYLkPxnYsjlUqGArbZUGB%2FvDx%2FzH2QgPNfopcofamJXANlYbza6u98qvfzRBXSY2e3KCjiCFfAe6YuHILpkR%2BfetqJ%2BzEW1PCq%2FpklTqdwGZ4Hibi7zTnhz6cX3Anu8F3j8H5cZ7iidBTFqbDYafHp7a2jBDjqwIEFSoK479FaWiavrgJUttv188NtozXHwnY0CNdK7gXYDaARn7tpu6Qcm5c02Q505ULAxWg%3D%3D&sign_type=RSA2&timestamp=2025-07-01+11%3A15%3A32&version=1.0"
  bookPost({},{'action':'sign'}).then(response => {
    imageUrl.value=response.body.qrcode
  })
  // isCreate.value=row.id
}
// 提供 open 方法，用于打开弹窗
defineExpose({open})

/** 表单提交 */
/** 重置表单 */
const resetForm = () => {
  // 重置表单数据
  formData.value = {...defaultForm};
};

</script>

<style lang="scss" scoped>
.form-dialog {
  .el-checkbox-group .el-checkbox {
    float: left;
    width: 150px;
    padding-right: 10px;
    margin: 0;
  }

  .permission-tree {
    width: 100%;
  }
  .tips{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #F5222D;
    padding: 16px;
  }
  .msg{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #999999;
  }
  .second_tab{
    padding: 16px;
    background: #F5F5F5;
    border-radius: 4px;
    margin-bottom: 20px;
    .second_tab_title{
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      margin-bottom: 8px;
    }
    .second_tab_item{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      margin-bottom: 4px;
    }
    .second_tab_item:last-child{
      margin-bottom: 0;
    }
  }
}
.sign_auth{
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  color: #333;
}
.sign_qr{
  height:500px;
  display: flex;
  justify-content: center;
  position: relative;
}
.sign_desc{
  text-align: center;
  color: red;
  font-size: 14px;
}
iframe {
  display: block; /* 使 iframe 作为块级元素 */
  width:70%; /* 填充外部 div 的宽度 */
  height:650px; /* 填充外部 div 的高度 */
  border: none; /* 去掉边框 */
}
</style>
